<template>
  <div class="appointment">
      <van-tabs v-model="active" swipeable @click="changeTab">
        <van-tab class="appoint-tab" v-for="(value, key) in states" :key='key' :title="value">
            <div class="appint-btn" v-if="appointment[key] && (appointment[key].length < 1)">
              <van-button @click="toChoose" type="primary" size="normal">
                    没有{{states[key]}}课程，去预约
              </van-button>
            </div>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh(key)">
              <appointment-item v-on:onRefresh="onRefresh" v-for="(item,k) in appointment[key]" :key='k' :appointId="item.id"
                  :name="item.name" :desc="item.description" :date="item.date" :start="item.start_time" :end="item.end_time" :price="item.price"
                  :thumb="item.preview.image | qnImg(null, 200)" :type="item.type" :status="item.status" :enabled="true">
              </appointment-item>
            </van-pull-refresh>
        </van-tab>
        <van-tab class="appoint-tab" title="私教">
            <div class="appint-btn" v-if="appointment['5'] && (appointment['5'].length < 1)">
              <van-button @click="toChoose" type="primary" size="normal">
                    没有私教课程，去预约
              </van-button>
            </div>
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh(5)">
              <appointment-item-person v-on:onRefresh="onRefresh" v-for="(item,k) in appointment[5]" :key='k' :id="item.id" :status="5"
                  :name="item.course.name" :desc="item.course.description" :date="item.date" :start="item.start_time" :end="item.end_time"
                  :thumb="item.course.preview.image | qnImg(null, 200)" :checkin="item.checkin" :course_id="item.course.id">
              </appointment-item-person>
            </van-pull-refresh>
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import appointmentItem from '../../components/base/appointment-item.vue'
import appointmentItemPerson from '../../components/base/appointment-item-person.vue'
export default {
  name: 'appointment',
  comments: 'appointment',
  components: {
    'appointment-item': appointmentItem,
    'appointment-item-person': appointmentItemPerson
  },
  data () {
    return {
      isLoading: false,
      active: 0,
      // 课程预约状态
      states: {
        2: '未开始',
        3: '进行中',
        4: '已完成'
      },
      // 预约的课程
      appointment: {
        2: null,
        3: null,
        4: null,
        5: null
      }
    }
  },
  mounted () {
    document.title = '我的预约'
    this.getAppointment(2)
  },
  watch: {
  },
  methods: {
    // 获取预约状态字典
    // getState () {
    //   var that = this
    //   this.$axios.get('/attributes/111').then(response => {
    //     that.states = response.data
    //   })
    // },
    changeTab (index, title) {
      if (!this.appointment[index + 2]) {
        this.getAppointment(index + 2)
      }
    },
    // 下拉刷新
    onRefresh (state) {
      var that = this
      var param = {
        status: state
      }
      var url = '/users/' + JSON.parse(localStorage.getItem('user')).id + '/courses'
      if (state === 5) {
        url = '/users/' + JSON.parse(localStorage.getItem('user')).id + '/appointments'
      } else {
        param.type = 'camp'
      }
      this.$axios.get(url, {
        params: param
      }).then(response => {
        that.appointment[state] = response.data
        // that.$toast('刷新成功')
        that.isLoading = false
      }).catch(error => {
        that.isLoading = false
        console.log(error)
      })
    },
    // 获取预约课程
    getAppointment (state) {
      var that = this
      var param = {
        status: state
      }
      var url = '/users/' + JSON.parse(localStorage.getItem('user')).id + '/courses'
      if (state === 5) {
        url = '/users/' + JSON.parse(localStorage.getItem('user')).id + '/appointments'
      } else {
        param.type = 'camp'
      }
      this.$axios.get(url, {
        params: param
      }).then(response => {
        that.appointment[state] = response.data
      })
    },
    // 获取私教
    getAppointmentPerson () {
    },
    toChoose () {
      this.$router.push({
        name: 'course'
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.appoint-item{
    background-color: #211919;
    color: white;
}
.appoint-btn{
    color: #f8f8f8;
    background-color: #4a4242;
    border: 1px solid #e5e5e5;
}
.appointment .van-tab{
    background-color: transparent;
}
.appoint-tab{
    padding: 0px 5px;
    height: -webkit-fill-available;
}
.appint-btn{
    position: absolute;
    z-index: 999;
    top: 200px;
    width: 100%;
}
</style>
